<template>
    <view class="product-container">
        <view
            class="product-item-container"
            v-for="item in 6"
            :key="item"
        >
            <view class="sk-img"></view>
            <view class="sk-text"></view>
            <view class="sk-text w-50"></view>
            <view class="sk-text w-50"></view>
            <view class="sk-btn">
                <view class="sk-text w-50"></view>
                <view class="w-20rpx"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'product-item-skeleton',
    props: ['isProductLoading'],
};
</script>

<style lang="scss" scoped>
.product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 0rpx;
}
.product-item-container {
    width: 334rpx;
    padding: 16rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 8px;
}
.sk-img {
    width: 100%;
    height: 300rpx;
    background-color: #efefef;
    border-radius: 16rpx 16rpx 0 0;
}
.sk-text {
    height: 32rpx;
    background-color: #efefef;
    margin: 20rpx 0;
    border-radius: 4px;
}
.w-50 {
    width: 50%;
}
.w-20rpx {
    width: 32rpx;
    height: 32rpx;
    background-color: #efefef;
    border-radius: 4px;
}
.sk-btn {
    height: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
